<template>
  <div class="hotlogin">
    <div class="box1">
      <p>若您已安装了网易云音乐，<br /><span>↑ ↑ 请下拉并点击“打开”按钮 ↑ ↑</span></p>
    </div>
    <div class="box2">
      (若无打开按钮，则点此打开)
    </div>
    <div class="box3">
      <div class="logo"></div>
      <button
        class="btn"
        @click="routerLogin"
      >立即登录</button>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({}),
  methods: {
    routerLogin() {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.hotlogin {
  height: ceil(100vh);
  background: url(//p3.music.126.net/3PJacreCq-eDuVDU4RFTQA==/18935789253812331.jpg)
    no-repeat 0 center/100% 100%;
  .box1 {
    text-align: center;
    p {
      padding-top: 16px;
      font-size: 13px;
      color: #fff;
      span {
        letter-spacing: 2px;
      }
    }
  }
  .box2 {
    text-align: center;
    padding-top: 16px;
    font-size: 12px;
    color: #999;
  }
  .box3 {
    margin-top: -40px;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .logo {
      margin: 0 auto;
      width: 108px;
      height: 108px;
      border-radius: 10px;
      background: url(//p3.music.126.net/tBTNafgjNnTL1KlZMt7lVA==/18885211718935735.jpg)
        no-repeat center/100% 100%;
    }
    .btn {
      margin-top: 40px;
      display: block;
      width: 188px;
      height: 46px;
      line-height: 46px;
      background: #311412;
      border: 1px solid #7c6a69;
      border-radius: 4px;
      color: #fff;
      font-size: 24px;
    }
  }
}
</style>